<template>
    <div>
        <el-upload
            :file-list="fileList"
            :class="{disabled:uploadDisabled}"
            :before-upload="beforeAvatarUpload"
            :on-preview="handlePictureCardPreview"
            :on-progress="handleProgress"
            :data='{code:this.hotelUuCode}'
            :on-remove="handleRemove"
            :limit=15
            :multiple=true
            :on-success="handleAvatarSuccess"
            :action="serviceUrl"
            :headers="header"
            list-type="picture-card"
            :on-exceed="handleExceed"
        >
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img
                width="100%"
                :src="dialogImageUrl"
                alt=""
            >
        </el-dialog>
    </div>
</template>

<script>
    import {
        getToken
    } from '@/utils/auth'
    import request from '@/utils/request'
    import {Message} from 'element-ui'

    export default {
        name: 'ImageListUpload',
        props: {
            uploadUrl: {
                type: String,
                default: ''
            },
            hotelUuCode: {
                type: String,
                default: ''
            },
            serviceFileList: {
                type: Array,
                default: []
            },
            removeUrl: {
                type: String,
                default: ''
            }
        },
        data () {
            return {
                serviceUrl: this.uploadUrl,
                fileList:[],
                code: {'code': this.hotelUuCode},
                dialogImageUrl: '',
                dialogVisible: false,
                header: {'X-Token': getToken()},
                uploadDisabled: false,
                mediaFileList: [],//上传文件集合
            }
        },
        watch: {
            serviceFileList: function () {
                if (this.serviceFileList.length > 0) {
                    this.fileList = this.serviceFileList
                    if (this.serviceFileList.length >= 15) {
                        this.uploadDisabled = true
                    }
                    this.serviceFileList.forEach(item => {
                        this.mediaFileList.push(item.url)
                    })
                }
            },
            mediaFileList: function () {
                this.$emit('mediaFileList', this.mediaFileList)
            }
        },
        methods: {
            handleExceed (file, fileList) {
                this.uploadDisabled = true
                this.$message({
                    message: '最大上传15张图片，已达上传上限',
                    type: 'warning'
                })
            },
            handleRemove (file, fileList) {
                if (file && file.status === 'success') {
                    this.uploadDisabled = false
                    //移除方法
                    let fileName
                    if (file.response) {
                        fileName = file.response.fileName
                        this.mediaFileList.splice(this.mediaFileList.indexOf(file.response.url), 1)
                    } else {
                        let fileUrl = file.url
                        fileName = fileUrl.substring(fileUrl.lastIndexOf('/') + 1, fileUrl.length)
                        this.mediaFileList.splice(this.mediaFileList.indexOf(file.url), 1)
                    }
                    console.log(file)

                    let params = {
                        code: this.hotelUuCode,
                        name: fileName
                    }
                    request({
                        url: this.removeUrl,
                        method: 'post',
                        data: params,
                    }).then(() => {
                    }).catch(error => {
                        console.log(error)
                    })
                }
            },
            handlePictureCardPreview (file) {
                this.dialogImageUrl = file.url
                this.dialogVisible = true
            },
            beforeAvatarUpload (file) {
                const isImage = new Set(['image/png', 'image/gif', 'image/jpg', 'image/jpeg']).has(file.type)
                const isLt2M = file.size / 1024 / 1024 < 2
                if (!isImage) {
                    this.$message.error('图片格式仅支持gif、png、jpg格式!')
                }
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!')
                }
                return isImage && isLt2M
            },
            handleAvatarSuccess: function (res, file, fileList) {
                if (res.code === 0) {
                    this.filename = res.url
                    this.mediaFileList.push(res.url)
                    if(this.mediaFileList.length>=15){
                        this.uploadDisabled = true
                    }
                    this.$notify({
                        title: '成功',
                        message: '上传成功',
                        type: 'success',
                        duration: 2000
                    })
                } else {
                    fileList.pop()
                    Message({
                        message: res.msg,
                        type: 'error',
                        duration: 5 * 1000
                    })
                }
            },
            handleProgress (event, file, fileList) {

            },
        }
    }
</script>

<style scoped>
    .disabled >>> .el-upload--picture-card {
        display: none;
    }
</style>
